<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>药速达首页</title>
		<meta name="decorator" content="default"/>
		<script type="text/javascript" src="${ctxStatic }/js/index.js"></script>
		<link href="${ctxStatic}/jquery-pagination/pagination.css" rel="stylesheet" />
		<script type="text/javascript" src="${ctxStatic }/jquery-pagination/jquery-pagination.js"></script>
		<script type="text/javascript">
			var pagenum=parseInt("${pageNo-1}");
			var pagesize=parseInt("${pageSize}");
			var totalCount=parseInt("${count}");
			$(function(){
				// 商品类别load
				var url_cate = "${ctx}/procatelist?urltype=";
				$("#procate").load(url_cate);
				
				// 公告load
				var url_cms1 = "${ctx}/cmslistindex?cmsCategory=1&loginType=${empty sessionScope.name ? '1':'3'}";
				$("#cms1").load(url_cms1);

				// 要闻回顾load
				var url_cms2 = "${ctx}/cmslistindex?cmsCategory=a&loginType=${empty sessionScope.name ? '1':'3'}";
				$("#cms2").load(url_cms2);
				
				// 创建分页元素				
				$("#Pagination").pagination(totalCount, {
					num_edge_entries: 2,
					current_page: pagenum,
					items_per_page: pagesize,
					num_display_entries: pagesize,
					prev_text: "上一页",
					next_text:"下一页",
					num_display_entries: 8,
					callback: pageselectCallback  //回调函数
				});
				
				$(".commodity_num .stock .comm_text").each(function(){
					$(this).numeral();
					var id = $(this).parent().next().val();
					calcPrice(id, $(this).val());
					$(this).on("blur keyup",function(){
						var id = $(this).parent().next().val();
						calcPrice(id, $(this).val());
					})
				});
				
				$(".commodity_num .stock .reduce").each(function(){
					$(this).on("click", function(){
						var o = $(this).next();
						var n = parseInt(o.val());
						if(n>1){
							o.val(n-1);
							var id = $(this).parent().next().val();
							calcPrice(id, o.val());
						}
					});
					
				});

				$(".commodity_num .stock .increase").each(function(){
					$(this).on("click", function(){
						var o = $(this).prev();
						var n = parseInt(o.val());
						o.val(n+1);	
						var id = $(this).parent().next().val();
						calcPrice(id, o.val());
					});
				});
				
				$(".commodity_num .gm_btn").each(function(){
					$(this).on("click", function(){
						var prodid = $(this).prev();
						var num = prodid.prev().children(".comm_text");
						addToCart(prodid.val(), num.val());						
					});
				});
			})
			
			function calcPrice(id, num){
				$.post("${ctx}/getprice",
					{"id":id, "num": num},
					function(price){
						$("#price"+id).text(price);
					}
				);
			}
			
			/*
			   添加到购物车 
			 */
			function addToCart(id, num){				
				$.post("${ctx}/addtocart",
					   {"id":id, "num": num},
					   function(message){//返回值为提示信息						   
					   	  if (message == '9998'){//session失效
					   	  	  window.location="${ctx}/login";
					   	  }					   
					   	$.jBox.messager('添加到购物车成功', '购物车');
					   }
				);				
			}
			function pageselectCallback(page_id, jq){
				$("#pageNo").val(page_id+1);
				$("#pageForm").submit();			
			}

		</script>
	</head>
<body>
<div class="main_centerbox">
	<div class="centerbox clearfix">
    	<div class="main_upbox clearfix" >      
		       <div class="navbox" id="procate">   
		       		<!-- 商品类别 -->             
               </div>
            <div class="bannerbox">
            	<ul>
                	<li><img src="${ctxStatic }/images/bg01.png"></img></li>
                    <li><img src="${ctxStatic }/images/bg02.jpg"></img></li>
                    <li><img src="${ctxStatic }/images/bg03.jpg"></img></li>
                    <li><img src="${ctxStatic }/images/bg04.png"></img></li>
                </ul>
                <ol>
                	<li class="banner_current">1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ol>
            </div>
            <div class="newsbox" >
            	<div class="news_content" id = "cms1">
                    <!-- 公告 -->
                </div>
               
                <div class="news_content" id = "cms2">
 					<!-- 要闻回顾 -->
                </div>
            </div>
        </div>
        <div class="commoditybox">
        	<h3>药品展示</h3>
            <div class="commoditybg clearfix">
            <c:forEach var="prod" items="${prodList }" varStatus="status">
            	<div class="commodity" <c:if test="${status.index % 4 =='3' }">style="margin-right:0px;"</c:if>>
            	
                    <div class="commodity_img">
                    <a href="${ctx }/prodetail?id=${prod.id}">                    
                    <c:if test="${not empty prod.pics}">
                    	<c:set value="${fn:split(prod.pics, '|')}" var="pic" />
                    	<img src="${svr_url}${pic[0]}" style="width:242px;height:200px;"/>
                    </c:if>
                    <c:if test="${empty prod.pics}">                    	
                    	<img src="${ctxStatic }/images/defaultprod.jpg"/>
                    </c:if>
                    
                    </a>
                    </div>
                    <div class="price">
                    	<span class="fh">￥</span>
                        <span class="yen" id="price${prod.id}">0.0</span>
                   	</div>
                    <h4><span class="commodity_tit"><a href="${ctx }/prodetail?id=${prod.id}">${prod.proName}</a>&nbsp;${prod.dosageForm }/${prod.etalon }/${prod.unit }</span></h4>
                    <div class="commodity_gn">${prod.proEnterprise}</div>
                    <div class="commodity_num">
                    	<span class="stock clearfix">
                           	<a class="reduce" href="javascript:;"></a>
                            <input class="comm_text" type="text" title="请输入购买量" maxlength="6" value="1"/>
                        	<a class="increase" href="javascript:;"></a>
                        </span>
                        <input type="hidden" id="prodid" value="${prod.id }"/>
                        <a class="gm_btn" href="javascript:;">加入购物车</a>
                    </div>              
                
                </div>
			</c:forEach>                
                <div class="zxdt_xinwen_list">
                	<div id="Pagination" class="pagination"></div>
					<form id="pageForm" method="post" action="${ctx }/index">
						<input type="hidden" id="pageNo" name="pageNo" value="${pageNo }"/>
						<input type="hidden" id="pageSize" name="pageSize" value="${pageSize }"/>
					</form>
                
<!--                 	<ul> -->
<!--                     	<li class="active"><span class="current_prev">上一页</span></li> -->
<!--                         <li class="active_prev"><span class="current">1</span></li> -->
<!--                         <li><a class="page-link" href="#">2</a></li> -->
<!--                         <li><a class="page-link" href="#">3</a></li> -->
<!--                         <li class="disabled"><a class="ellipse" href="#">...</a></li> -->
<!--                         <li><a class="page-link" href="#">9</a></li> -->
<!--                         <li><a class="page-link" href="#">10</a></li> -->
<!--                         <li><a class="page_next" href="#">下一页</a></li> -->
<!--                     </ul> -->
                </div>
            </div> 
        </div>
        <div class="yqljbox">
        	<h3>友情连接</h3>
            <div class="ljbox clearfix">
            	<a href="#">长沙食品药品行业诚信网</a>
                <a href="#">长沙食品药品行业诚信网</a>
                <a href="#">长沙食品药品行业诚信网</a>
                <a href="#">长沙食品药品行业诚信网</a>
                <a style=" border-right:none;" href="#">长沙食品药品行业诚信网</a>
            </div>
        </div>
    </div>
</div>
</body>
</html>
